import { Navigate } from "react-router-dom";

//懒加载操作步骤
//1. 导入 lazy 懒惰  Suspense 悬念
import { lazy, Suspense } from "react";

//2. 调用 lazy 函数实现组件的懒加载
let Gedan = lazy(() => {
  return import("../pages/Gedan/Gedan");
});
let Geshou = lazy(() => import("../pages/Geshou/Geshou"));
let MineMusic = lazy(() => import("../pages/MineMusic/MineMusic"));
let MusicGuan = lazy(() => import("../pages/MusicGuan/MusicGuan"));

//3. 声明函数
let load = (Com) => {
  // 使用 Suspense 包裹懒加载的组件
  return <Suspense fallback={<div>正在加载中...</div>}>
            <Com />
          </Suspense>
}
//声明数组
let routesArr = [
  {
    path: "/home",
    element: (
      // 4. 调用 load 函数设置懒加载的组件 
      load(MusicGuan)
    ),
    children: [
      {
        path: "/home/index",
        element: load(Gedan),
      },
      {
        path: "singer",
        element: load(Geshou),
      },
      //默认打开歌单组件
      {
        index: true,
        element: <Navigate to="/home/index" />,
      },
    ],
  },
  {
    path: "/mine",
    element: (
      load(MineMusic)
    ),
  },
];

export default routesArr;
